<template>
  <div class="container">
    <search-part @parentMethod="contentCharge" searchTip="请输入搜索内容"></search-part>
    <div ref="container" class="list-container">
      <div style="width: 100%;height: 30px;background:#efefef "></div>
      <div class="list-top row-center">
        <img v-if="topType===2" class="loading-icon" src="../assets/img/loading.png">
        <img ref="refreshIcon" v-if="topType!==2&&topType!==3" class="refresh-icon"
             src="../assets/img/refresh-icon.png">

        <div v-if="topType===0">上拉刷新</div>
        <div v-if="topType===1">释放刷新</div>
        <div v-if="topType===2">正在刷新</div>
        <div v-if="topType===3">刷新成功</div>

      </div>
      <div @click="enterDetail(item.id)" v-for="(item,index) in listData" :key="'scrollerList'+index"
           class="list-item row-between">
        {{ item }}
      </div>
      <div v-show="bottomType===1" class="load-bottom row-center">
        <img class="loading-icon" src="../assets/img/loading.png">
        <div>正在加载中</div>

      </div>
      <div v-show="bottomType===2" class="load-bottom row-center">
        <div>我也是有底线的</div>

      </div>

    </div>
    <img v-show="showBackTop" @click="goBackTop" class="back-top" src="../assets/img/back_top.png">

  </div>
</template>

<script>
import SearchPart from '../personView/SearchPart'
import {toast} from "@/util/base";

export default {
  name: "scroller",
  components: {
    'searchPart': SearchPart
  },
  data() {
    return {
      num: 1,
      listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
      bottomType: 0,
      canLoad: true,
      timer: '',
      resetTimer: '',
      refreshTimer: '',
      showBackTop: true,
      isLoading: false,
      topType: 0,//0下拉刷新   1释放刷新  2 正在刷新  3 刷新成功
      topMsg: '上拉刷新'
    }
  },
  mounted() {
    //初始化滑动位置
    this.$refs.container.scrollTo(0, 80);
    this.setScrollListen();
    this.setTouchEnd();
  },
  methods: {
    //设置滑动结束事件
    setTouchEnd() {
      this.$refs.container.addEventListener('touchend', this.touchEnd, false);
    },
    touchEnd() {
      let position = this.$refs.container.scrollTop;
      if (position < 30) {
        this.goRefresh();
        if (this.topType === 2) {
          return;
        }
        this.topType = 2;
        this.topRefresh();
      } else if (position >= 30 && position < 80) {
        this.goReset();
      }

    },
    //上拉刷新调用
    topRefresh() {
      let that = this;
      setTimeout(function () {
        that.topRefreshSuccess();
      }, 3000)
    },
    //上拉刷新成功回调
    topRefreshSuccess() {
      let that = this;
      that.topType = 3;
      setTimeout(function () {
        that.goReset();
      }, 1000)

    },
    contentCharge(newContent) {
      toast(newContent);
    },
    //进入详情页逻辑
    enterDetail(id) {
    },
    //加载更多
    loadData() {
      let that = this;
      this.isLoading = true;
      setTimeout(function () {
        if (that.$refs.container.scrollHeight - 2 < that.$refs.container.clientHeight && that.$refs.container.clientHeight < that.$refs.container.scrollHeight + 2) {
          that.bottomType = 0;
        }
        that.isLoading = false;

        if (that.num < 2) {
          that.listData = that.listData.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
        } else {
          that.bottomType = 2;
        }

        that.num = that.num + 1;
      }, 2000);
    },
    // 设置滑动监听
    setScrollListen() {
      let that = this;
      try {
        if (!that.$refs.container.scrollHeight)
          return;
        if (that.topType !== 2 && that.topType !== 3) {//如果上拉状态为刷新成功或正在刷新，则不更新状态
          let position = that.$refs.container.scrollTop;
          if (position > 30) {
            if (that.topType === 1) {
              that.$refs.refreshIcon.className = 'refresh-icon-upward';
            }
            that.topType = 0;
          } else {
            if (this.topType === 0) {
              that.$refs.refreshIcon.className = 'refresh-icon-down';

            }
            that.topType = 1;
          }
        }
      } catch (err) {
        return;
      }
      //不存在滑动，底部不显示
      if ((that.$refs.container.scrollHeight - 2 < that.$refs.container.clientHeight && that.$refs.container.clientHeight < that.$refs.container.scrollHeight + 2)) {
        this.bottomType = 0;
      } else if (this.bottomType != 2) {
        this.bottomType = 1;
      }
      //控制返回顶部显示隐藏
      that.showBackTop = !(that.$refs.container.scrollTop < 85);
      if ((that.$refs.container.scrollHeight - 2 < that.$refs.container.scrollTop + that.$refs.container.clientHeight) && (that.$refs.container.scrollTop + that.$refs.container.clientHeight < that.$refs.container.scrollHeight + 2) && !that.isLoading) {
        if (that.canLoad) {
          that.loadData();
        }
      }
      if (that.canLoad) {
        setTimeout(function () {
          that.setScrollListen();
        }, 80);
      }
    },
    goBackTop() {
      this.timer = setInterval(this.goBackItem, 3);
    },
    goBackItem() {
      let position = this.$refs.container.scrollTop;
      position -= 10;
      if (position > 85) {
        this.$refs.container.scrollTo(0, position);
      } else {
        this.$refs.container.scrollTo(0, 80);
        clearInterval(this.timer);
      }
    },
    goRefresh() {
      this.refreshTimer = setInterval(this.goRefreshItem, 20);
    },
    goRefreshItem() {
      let position = this.$refs.container.scrollTop;
      position += 10;
      if (position < 25) {
        this.$refs.container.scrollTo(0, position);
      } else {
        this.$refs.container.scrollTo(0, 30);
        clearInterval(this.refreshTimer);
      }
    },
    goReset() {
      this.resetTimer = setInterval(this.goResetItem, 20);
    },
    goResetItem() {
      let position = this.$refs.container.scrollTop;
      position += 10;
      if (position < 75) {
        this.$refs.container.scrollTo(0, position);
      } else {
        this.$refs.container.scrollTo(0, 80);
        this.topType = 0;
        clearInterval(this.resetTimer);
      }
    }
  }
}
</script>

<style scoped>
@import "../css/scroller.css";

</style>
